<template>
  <div id="app">
    <div ref="mapBox" id="mapBox"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
//导入中国地图的JS文件
import "./china.js";
var geoCoordMap = {
  上海: [121.4648, 31.2891],
  乌鲁木齐: [87.9236, 43.5883],
  兰州: [103.5901, 36.3043],
  北京: [116.4551, 40.2539],
  南京: [118.8062, 31.9208],
  南宁: [108.479, 23.1152],
  南昌: [116.0046, 28.6633],
  南通: [121.1023, 32.1625],
  厦门: [118.1689, 24.6478],
  合肥: [117.29, 32.0581],
  呼和浩特: [111.4124, 40.4901],
  咸阳: [108.4131, 34.8706],
  哈尔滨: [127.9688, 45.368],
  大连: [122.2229, 39.4409],
  天津: [117.4219, 39.4189],
  太原: [112.3352, 37.9413],
  威海: [121.9482, 37.1393],
  宁波: [121.5967, 29.6466],
  广州: [113.5107, 23.2196],
  成都: [103.9526, 30.7617],
  扬州: [119.4653, 32.8162],
  拉萨: [91.1865, 30.1465],
  昆明: [102.9199, 25.4663],
  杭州: [119.5313, 29.8773],
  株洲: [113.5327, 27.0319],
  武汉: [114.3896, 30.6628],
  汕头: [117.1692, 23.3405],
  沈阳: [123.1238, 42.1216],
  济南: [117.1582, 36.8701],
  济宁: [116.8286, 35.3375],
  海口: [110.3893, 19.8516],
  淮安: [118.927, 33.4039],
  深圳: [114.5435, 22.5439],
  温州: [120.498, 27.8119],
  烟台: [120.7397, 37.5128],
  珠海: [113.7305, 22.1155],
  石家庄: [114.4995, 38.1006],
  福州: [119.4543, 25.9222],
  秦皇岛: [119.2126, 40.0232],
  绍兴: [120.564, 29.7565],
  苏州: [120.6519, 31.3989],
  西宁: [101.4038, 36.8207],
  西安: [109.1162, 34.2004],
  贵阳: [106.6992, 26.7682],
  郑州: [113.4668, 34.6234],
  重庆: [107.7539, 30.1904],
  银川: [106.3586, 38.1775],
  长春: [125.8154, 44.2584],
  长沙: [113.0823, 28.2568],
  青岛: [120.4651, 36.3373],
};

var BJData = [
  [{ name: "北京" }, { name: "深圳", value: 71 }],
  [{ name: "北京" }, { name: "重庆", value: 64 }],
  [{ name: "北京" }, { name: "广州", value: 58 }],
  [{ name: "北京" }, { name: "长沙", value: 29 }],
  [{ name: "北京" }, { name: "海口", value: 28 }],
  [{ name: "北京" }, { name: "南京", value: 25 }],
  [{ name: "北京" }, { name: "武汉", value: 23 }],
  [{ name: "北京" }, { name: "南昌", value: 23 }],
  [{ name: "北京" }, { name: "烟台", value: 21 }],
  [{ name: "北京" }, { name: "温州", value: 17 }],
  [{ name: "北京" }, { name: "沈阳", value: 14 }],
  [{ name: "北京" }, { name: "西宁", value: 13 }],
  [{ name: "北京" }, { name: "合肥", value: 9 }],
  [{ name: "北京" }, { name: "呼和浩特", value: 9 }],
  [{ name: "北京" }, { name: "南通", value: 8 }],
  [{ name: "北京" }, { name: "乌鲁木齐", value: 1 }],
  [{ name: "北京" }, { name: "兰州", value: 15 }],
];

var SHData = [
  [{ name: "上海" }, { name: "深圳", value: 136 }],
  [{ name: "上海" }, { name: "北京", value: 132 }],
  [{ name: "上海" }, { name: "广州", value: 117 }],
  [{ name: "上海" }, { name: "厦门", value: 65 }],
  [{ name: "上海" }, { name: "哈尔滨", value: 61 }],
  [{ name: "上海" }, { name: "成都", value: 59 }],
  [{ name: "上海" }, { name: "大连", value: 55 }],
  [{ name: "上海" }, { name: "重庆", value: 53 }],
  [{ name: "上海" }, { name: "西安", value: 49 }],
  [{ name: "上海" }, { name: "沈阳", value: 49 }],
  [{ name: "上海" }, { name: "青岛", value: 48 }],
  [{ name: "上海" }, { name: "长春", value: 47 }],
  [{ name: "上海" }, { name: "长沙", value: 32 }],
  [{ name: "上海" }, { name: "天津", value: 30 }],
  [{ name: "上海" }, { name: "昆明", value: 30 }],
  [{ name: "上海" }, { name: "武汉", value: 27 }],
  [{ name: "上海" }, { name: "太原", value: 24 }],
  [{ name: "上海" }, { name: "乌鲁木齐", value: 4 }],
  [{ name: "上海" }, { name: "兰州", value: 14 }],
];

var GZData = [
  [{ name: "广州" }, { name: "上海", value: 153 }],
  [{ name: "广州" }, { name: "北京", value: 138 }],
  [{ name: "广州" }, { name: "杭州", value: 104 }],
  [{ name: "广州" }, { name: "成都", value: 89 }],
  [{ name: "广州" }, { name: "重庆", value: 84 }],
  [{ name: "广州" }, { name: "南京", value: 75 }],
  [{ name: "广州" }, { name: "昆明", value: 62 }],
  [{ name: "广州" }, { name: "西安", value: 62 }],
  [{ name: "广州" }, { name: "海口", value: 58 }],
  [{ name: "广州" }, { name: "郑州", value: 51 }],
  [{ name: "广州" }, { name: "武汉", value: 49 }],
  [{ name: "广州" }, { name: "天津", value: 39 }],
  [{ name: "广州" }, { name: "青岛", value: 36 }],
  [{ name: "广州" }, { name: "济南", value: 35 }],
  [{ name: "广州" }, { name: "宁波", value: 34 }],
  [{ name: "广州" }, { name: "乌鲁木齐", value: 23 }],
  [{ name: "广州" }, { name: "兰州", value: 25 }],
];

//航线上的飞机模型的矢量图
var planePath =
  "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
export default {
  name: "App",
  mounted() {
    this.initMap();
  },
  methods: {
    //用于返回起点名字、终点名字、起点坐标、终点坐标
    returnCoords(data) {
      let result = [];
      for (let i = 0; i < data.length; i++) {
        let fromcoords = geoCoordMap[data[i][0]["name"]];
        let tocoords = geoCoordMap[data[i][1]["name"]];
        result.push({
          fromname: data[i][0]["name"],
          toname: data[i][1]["name"],
          coords: [fromcoords, tocoords],
          value: data[i][1]["value"],
        });
      }
      return result;
    },
    //返回航线和飞机的颜色：三种颜色（起点为广州的、上海的、北京的）
    returnColor(index) {
      return index === 0 ? "#6beef4" : index === 1 ? "#ecc021" : "#73fa3b";
    },
    //初始化
    initMap() {
      let series = [];

      [GZData, SHData, BJData].forEach((item, index) => {
        series.push({
          type: "lines", //series.type = "lines"表名是想渲染模拟迁徙的模板
          name: index === 0 ? "广州" : index === 1 ? "上海" : "北京", //鼠标hover到航线上去显示不同的内容
          zlevel: index === 0 ? 0 : index === 1 ? 1 : 2, //zleve控制飞机的图标的分层
          effect: {
            show: true,
            symbol: planePath, //把矢量图planPath赋值给symbol
            symbolSize: 18, // 控制矢量图的大小
          },
          //线条的样式
          lineStyle: {
            curveness: 0.2, //控制线条的弯曲度
            color: this.returnColor(index), //不同的起点显示不同的线条样式
            width: 3, //线条的宽度
          },
          data: this.returnCoords(item), //所有的航线起始地点的数据
        });
      });
      this.myEcharts = echarts.init(this.$refs.mapBox, "dark");
      let option = {
        title: {
          text: "中国航空航线图", //整个的标题
        },
        //geo用于显示地图坐标
        geo: {
          map: "china", //导入的china.js，该文件中注册的china地图。
          zoom: 1.2, //默认显示的缩放倍数
          roam: true, //是否开启鼠标的缩放
          scaleLimit: {
            //控制鼠标缩放的最小倍数，最大倍数
            min: 1,
            max: 1,
          },

          label: {
            show: true, //控制省份名称的显示隐藏
            offset: [0, 0], // 控制省份名称的偏移量
            color: "white", // 省份名称的字体颜色
          },

          //板块的颜色
          itemStyle: {
            areaColor: "#3151f0", //每个板块的颜色
            borderColor: "#404a59", //板块的边界颜色
          },
          //鼠标移入某板块的样式设置
          emphasis: {
            //移入该板块时的板块颜色
            itemStyle: {
              areaColor: "red",
            },
            //省份的名称颜色
            label: {
              color: "white",
            },
          },
        },
        series: series, //显示的数据

        //鼠标hover到航线上显示数据
        tooltip: {
          show: true,
          formatter: function (data) {
            //返回该航线的数据
            return (
              data.data.fromname +
              ">>>" +
              data.data.toname +
              "：" +
              data.data.value
            );
          },
        },
      };
      this.myEcharts.setOption(option);
    },
  },
};
</script>

<style>
#mapBox {
  width: 1200px;
  height: 800px;
}
</style>
